<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="common.jsp"%>

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description"
	content="An Amaze UI template that helps you build fast, modern mobile web apps.">
<meta name="viewport"
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>我的月卡</title>

<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">

<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp" />

<link rel="icon" type="image/png" href="i/favicon.png">

<!-- Add to homescreen -->
<link rel="manifest" href="manifest.json">

<!-- Fallback to homescreen for Chrome <39 on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Web Starter Kit">
<link rel="icon" sizes="192x192"
	href="i/touch/chrome-touch-icon-192x192.png">

<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title"
	content="Amaze UI Sfavicon.pngtarter Kit">
<link rel="apple-touch-icon" href="i/touch/apple-touch-icon.png">

<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage"
	content="i/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#0e90d2">

<style type="text/css">
	.am-list {
	    margin-bottom: 0px;
	    padding-left: 0;
	    border: none;
	}
	
	.am-list-news-default .am-list>li {
	    border-color: #dddddd;
	}
	
	.am-figure-default img {
	    margin: 3px auto;
        border: none;
        padding: 0;
	}
</style>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<body>

	<figure data-am-widget="figure" class="am am-figure am-figure-default "
		data-am-figure="{}" style="margin: 0; position: relative; text-align: center;">
		<img src="<%=basePath%>static/images/wechat/wallet_bg.png"
			style="margin: 0px; padding: 0px; border: none; height: 8em; width: 100%;" />
			<div style="position: absolute; text-align: center; top: 0.8em; left: 1em; " align="center" >
					<div id="balance" style="color:#FFF; font-size: 1.6rem; float: left;">
						<span style="padding-left:4px;" id="statusText">
							<c:if test="${card.status==1}">有效</c:if>
							<c:if test="${card.status==2}">过期</c:if>
						</span>
					</div>
			</div>
			<div style="position: absolute; text-align: center; top: 0.8em; right: 1em; " align="center" >
					<div onclick="cardOrder()" style="color:#FFF; font-size: 1.6rem; float: left;">
						<span>充值明细</span>
					</div>
			</div>
			<div style="position: absolute; text-align: center; top: 2.6em; width: 100%; " align="center" >
				<div id="balance" style="color:#FFF; font-size: 1.4rem;">截止日期</div>
				<div id="balance" style="color:#FFF; font-size: 2rem;" id="deadlineDate">
					${card.deadlineDate }
				</div>
			</div>
	</figure>
	
	<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin: 0px; border: none; padding: 15px 0; background: #FFF;">
	  <div class="am-list-news-bd">
	    <ul class="am-list" style="">
	      <li class="am-g am-list-item am-list-item-desced" style="border: none; padding-left: 10px; padding-right:10px; line-height: 40px;">
	        <div class="am-u-sm-3 am-list-item-hd" style="padding: 0; padding-left: 10px; border-top-left-radius:3px; border-bottom-left-radius:3px; border:1px solid #dddddd; border-right: none;">车牌号:</div>
	        <div class="am-u-sm-9" style="padding: 0; border-top-right-radius:3px; border-bottom-right-radius:3px; border:1px solid #dddddd; border-left: none;">
	        	${card.plateNumber }
	        </div>
	      </li>
	      <li class="am-g am-list-item am-list-item-desced" style="border: none; padding-left: 10px; padding-right:10px; line-height: 40px;">
	        <div class="am-u-sm-3 am-list-item-hd" style="padding: 0; padding-left: 10px; border-top-left-radius:3px; border-bottom-left-radius:3px; border:1px solid #dddddd; border-right: none;">停车场:</div>
	        <div class="am-u-sm-9" style="padding: 0; border-top-right-radius:3px; border-bottom-right-radius:3px; border:1px solid #dddddd; border-left: none;">
	        	${park.name }
	        </div>
	      </li><li class="am-g am-list-item am-list-item-desced" style="border: none; padding-left: 10px; padding-right:10px; line-height: 40px;">
	        <div class="am-u-sm-3 am-list-item-hd" style="padding: 0; padding-left: 10px; border-top-left-radius:3px; border-bottom-left-radius:3px; border:1px solid #dddddd; border-right: none;">金额(元):</div>
	        <div id="money" class="am-u-sm-9" style="padding: 0; border-top-right-radius:3px; border-bottom-right-radius:3px; border:1px solid #dddddd; border-left: none;">
	        	${card.price }
	        </div>
	        <input id="price" type="hidden" value="${card.price }" />
	      </li>
	      <li class="am-g am-list-item-desced" style="border: none; text-align: center; padding-left: 10px; padding-right:10px; line-height: 38px; font-size: 1.8rem; ">
				<div class="am-u-sm-4" style="padding: 0px;">
					<div id="firstBtn" onclick="chooseNum(1)" style="margin-right:12px; border-radius: 3px; border: 1px solid #60c75e; ">一个月</div>
				</div>
				<div class="am-u-sm-4" style="padding: 0px;" >
					<div id="secondBtn" onclick="chooseNum(2)" style="margin-left:6px; margin-right:6px; border-radius: 3px; border: 1px solid #60c75e; ">两个月</div>
				</div>
				<div class="am-u-sm-4" style="padding: 0px;" >
					<div id="thirdBtn" onclick="chooseNum(3)" style="margin-left:12px; border-radius: 3px; border: 1px solid #60c75e; ">三个月</div>
				</div>
		  </li>
	    </ul>
	  </div>
	</div>

	<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="border: none; margin: 0;">
	  <div class="am-list-news-bd">
	    <ul class="am-list" style=" border:none;">
	      <li class="am-g am-list-item am-list-item-desced" style=" border: none; background-color: #eee; padding-left:10px; padding-right: 10px;">
	      	<div class="am-list-item-hd">支付方式</div>
	      </li>
	      <li class="am-g am-list-item am-list-item-desced" style="border: none; padding-left:10px; padding-right: 10px;">
	        <div class="am-u-sm-9 am-list-item-hd" style="padding: 0;"><img src="<%=basePath%>static/images/wechat/pay_weixin.png" style="margin:0 auto; padding: 0px; border: none; height: 2em; width: 2em; margin-right: 10px;" />微信</div>
	        <span class="am-u-sm-3" style="text-align: right;"><img id="weixin" src="<%=basePath%>static/images/wechat/select_yes.png" style="margin:0 auto; padding: 0px; border: none; height: 2em; width: 2em; " /></span>
	      </li>
	    </ul>
	  </div>
	</div>
	
	<div data-am-widget="list_news"
		class="am-list-news am-list-news-default" style="margin: 0; clear:both; background: #FFF;">
		<div class="am-list-news-bd" style="padding: 0px 10px; padding-top:40px; padding-bottom: 200px;">
			<ul class="am-list" style=" text-align: center;">
				<li class="am-g am-list-item-desced" style="border: none; text-align: center;">
					<button id="payBtn" onclick="toPay()" type="button" class="am-btn am-btn-primary am-btn-block am-round" style="background-color: #ec6c2c; color: #fff; border-color: #ec6c2c; border-radius: 4px; font-size: 1.8rem; ">立即支付</button>
				</li>
			</ul>
		</div>
	</div>
	
	<input type="hidden" id="uid" value="${uid }" />
	<input type="hidden" id="ecode" value="${ecode }" />
	<input type="hidden" id="plateNumber" value="${card.plateNumber }" />
	<input type="hidden" id="parkCode" value="${card.parkCode }" />
	<input type="hidden" id="rechargeNum" />
	
	<script>
		var selectURL = '<%=basePath%>static/images/wechat/select_yes.png';
		var unselectURL = '<%=basePath%>static/images/wechat/select_no.png';
		
		$(function() {
			// 默认一个月
		  	chooseNum(1);
		});
		
		function cardOrder() {
			var uid = $("#uid").val();
			var ecode = $("#ecode").val();
			var plateNumber = $("#plateNumber").val();
			var parkCode = $("#parkCode").val();
			window.location.href = "<%=basePath%>wechat/cardOrder?uid="+uid+"&ecode="+ecode+"&plateNumber="+plateNumber+"&parkCode="+parkCode;
		}
		
		function chooseNum(num) {
			changeStyle(num);
			$("#rechargeNum").val(num);
			var price = $("#price").val();
			var money = price * num;
			$("#money").text(money.toFixed(2));
		}
		
		function changeStyle(num) {
			if(num==1) {
				$("#firstBtn").css("color", "#FFF");
				$("#firstBtn").css("background-color", "#60c75e");
				$("#secondBtn").css("color", "#292929");
				$("#secondBtn").css("background-color", "#FFF");
				$("#thirdBtn").css("color", "#292929");
				$("#thirdBtn").css("background-color", "#FFF");
			} else if(num==2) {
				$("#secondBtn").css("color", "#FFF");
				$("#secondBtn").css("background-color", "#60c75e");
				$("#firstBtn").css("color", "#292929");
				$("#firstBtn").css("background-color", "#FFF");
				$("#thirdBtn").css("color", "#292929");
				$("#thirdBtn").css("background-color", "#FFF");
			} else if(num==3) {
				$("#thirdBtn").css("color", "#FFF");
				$("#thirdBtn").css("background-color", "#60c75e");
				$("#firstBtn").css("color", "#292929");
				$("#firstBtn").css("background-color", "#FFF");
				$("#secondBtn").css("color", "#292929");
				$("#secondBtn").css("background-color", "#FFF");
			}
		}
		
		// 支付
		function toPay() {
			// create temp order
			$('#payBtn').css("background-color","#fee1a9");
			$('#payBtn').css("border-color", "#fee1a9");
			$('#payBtn').attr("disabled",true);
			var plateNumber = $("#plateNumber").val();
			var parkCode = $("#parkCode").val();
			var rechargeNum = $("#rechargeNum").val();
			var price = $("#price").val();
			var url = "<%=basePath%>api/createCardOrderTemp";
			$.post(url,
				  {
					plateNumber:plateNumber,
					parkCode:parkCode,
					rechargeNum:rechargeNum,
					price:price
				  },
				  function(result){
					var rtn = JSON.parse(result);
					if(rtn.code == 1){
						useWeixin(rtn.orderNo);
					}else{
						alertText(rtn.text);
					}
				  }
			);
		}
		
	/**
	 * 从服务端获取微信签名数据
	 * @param price
	 * @return
	 */
	function useWeixin(orderNo)
	{
		var uid = $("#uid").val();
		var ecode = $("#ecode").val();
		var bodyStr = "月卡订单";
		var url = '<%=basePath%>api/initWeixinPay';
		var dynamicURL = location.href.split('#')[0];
		$.ajax(url, {
			    type: 'post',
			    data: { 
				    	dynamicURL:dynamicURL,
						uid:uid,
						ecode:ecode,
						orderNo:orderNo,
						body:bodyStr
			    	  },
			    success: function(result){
			    	var rtn = JSON.parse(result);
			    	if(rtn.code == 1)
			    	{
			    		var appId = rtn.data.appId;
			    		var signature = rtn.data.signature;
			    		var timestamp = rtn.data.timestamp;
			    		var nonceStr = rtn.data.nonceStr;
			    		
			    		var prepay_id = rtn.data.WxOrder.prepay_id;
			    		var signType = rtn.data.WxOrder.signType;
			    		var paySign = rtn.data.WxOrder.paySign;
			    		var orderNo = rtn.data.WxOrder.orderNo;
			    		
			    		initWeixin(appId, timestamp, nonceStr, signature, prepay_id, signType, paySign, orderNo);
			    	} else {
			    		alertText(rtn.text);
			    	}
			    }
			});
	}

	/**
	 * 初始化微信签名验证
	 * @param {Object} appId
	 * @param {Object} timestamp
	 * @param {Object} nonceStr
	 * @param {Object} signature
	 */
	function initWeixin(appId, timestamp, nonceStr, signature, prepay_id, signType, paySign, orderNo)
	{
		wx.config({
			debug: false, 
			appId: appId, 
			timestamp: timestamp, 
			nonceStr: nonceStr, 
			signature: signature,
			jsApiList: ['chooseWXPay'] 
		});
		
		wx.ready(function(){
			payByWeixin(timestamp, nonceStr, prepay_id, signType, paySign, orderNo);
		});
		
		wx.error(function(res){
			alert('调用失败！');
		});
	}
	
	/**
	 * 微信支付结果处理
	 * @param {Object} timestamp
	 * @param {Object} nonceStr
	 * @param {Object} prepay_id
	 * @param {Object} signType
	 * @param {Object} paySign
	 */
	function payByWeixin(timestamp, nonceStr, prepay_id, signType, paySign, orderNo){
		
		wx.chooseWXPay({
		    timestamp: timestamp, 
		    nonceStr: nonceStr, 
		    package: prepay_id, 
		    signType: signType, 
		    paySign: paySign, 
		    cancel:function(res){
				alert("支付取消");
				$('#payBtn').css("background-color","#ec6c2c");
				$('#payBtn').css("border-color", "#ec6c2c");
				$('#payBtn').attr("disabled",false);
			},
			error:function(res){
				alert("支付出错");
			},
			success:function(res){
				alert("支付成功");
				createYKOrder(orderNo);
			}
		});
		
	}
	
	function createYKOrder(orderNo)
	{
		var url = "<%=basePath%>api/paySuccess";
		$.post(url,
			  {
				orderNo:orderNo
			  },
			  function(result){
				var rtn = JSON.parse(result);
				if(rtn.code == 1){
					WeixinJSBridge.call('closeWindow');
				}else{
					alertText(rtn.text);
				}
			  }
		);
	}
	</script>

	<!-- Built with love using Web Starter Kit -->
</body>

</html>